<%
layout("/layout/unify.html",{title:'蛋客服'}){
%>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <strong>jsTree</strong>是一个基于jQuery的Tree控件。支持 XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。
                    <br>更多信息请访问： <a href="http://www.jstree.com/" target="_blank">http://www.jstree.com/</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>基本示例 <small>使用Font Awesome图标</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="jstree1">
                        <ul>
                            <li class="jstree-open">H+主题
                                <ul>
                                    <li>css
                                        <ul>
                                            <li data-jstree='{"type":"css"}'>animate.css</li>
                                            <li data-jstree='{"type":"css"}'>bootstrap.css</li>
                                            <li data-jstree='{"type":"css"}'>style.css</li>
                                        </ul>
                                    </li>
                                    <li>email-templates
                                        <ul>
                                            <li data-jstree='{"type":"html"}'>action.html</li>
                                            <li data-jstree='{"type":"html"}'>alert.html</li>
                                            <li data-jstree='{"type":"html"}'>billing.html</li>
                                        </ul>
                                    </li>
                                    <li>fonts
                                        <ul>
                                            <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.eot</li>
                                            <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.svg</li>
                                            <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.ttf</li>
                                            <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.woff</li>
                                        </ul>
                                    </li>
                                    <li class="jstree-open">img
                                        <ul>
                                            <li data-jstree='{"type":"img"}'>profile_small.jpg</li>
                                            <li data-jstree='{"type":"img"}'>angular_logo.png</li>
                                            <li class="text-navy" data-jstree='{"type":"img"}'>html_logo.png</li>
                                            <li class="text-navy" data-jstree='{"type":"img"}'>mvc_logo.png</li>
                                        </ul>
                                    </li>
                                    <li class="jstree-open">js
                                        <ul>
                                            <li data-jstree='{"type":"js"}'>hplus.js</li>
                                            <li data-jstree='{"type":"js"}'>bootstrap.js</li>
                                            <li data-jstree='{"type":"js"}'>jquery-2.1.1.js</li>
                                            <li data-jstree='{"type":"js"}'>jquery-ui.custom.min.js</li>
                                            <li class="text-navy" data-jstree='{"type":"js"}'>jquery-ui-1.10.4.min.js</li>
                                        </ul>
                                    </li>
                                    <li data-jstree='{"type":"html"}'>affix.html</li>
                                    <li data-jstree='{"type":"html"}'>dashboard.html</li>
                                    <li data-jstree='{"type":"html"}'>buttons.html</li>
                                    <li data-jstree='{"type":"html"}'>calendar.html</li>
                                    <li data-jstree='{"type":"html"}'>contacts.html</li>
                                    <li data-jstree='{"type":"html"}'>css_animation.html</li>
                                    <li class="text-navy" data-jstree='{"type":"html"}'>flot_chart.html</li>
                                    <li class="text-navy" data-jstree='{"type":"html"}'>google_maps.html</li>
                                    <li data-jstree='{"type":"html"}'>icons.html</li>
                                    <li data-jstree='{"type":"html"}'>inboice.html</li>
                                    <li data-jstree='{"type":"html"}'>login.html</li>
                                    <li data-jstree='{"type":"html"}'>mailbox.html</li>
                                    <li data-jstree='{"type":"html"}'>profile.html</li>
                                    <li class="text-navy" data-jstree='{"type":"html"}'>register.html</li>
                                    <li data-jstree='{"type":"html"}'>timeline.html</li>
                                    <li data-jstree='{"type":"html"}'>video.html</li>
                                    <li data-jstree='{"type":"html"}'>widgets.html</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>JSON示例</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div id="treeContent"></div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    $(document).ready(function () {

        $('#jstree1').jstree({
            'core': {
                'check_callback': true
            },
            'plugins': ['types', 'dnd'],
            'types': {
                'default': {
                    'icon': 'fa fa-folder'
                },
                'html': {
                    'icon': 'fa fa-file-code-o'
                },
                'svg': {
                    'icon': 'fa fa-file-picture-o'
                },
                'css': {
                    'icon': 'fa fa-file-code-o'
                },
                'img': {
                    'icon': 'fa fa-file-image-o'
                },
                'js': {
                    'icon': 'fa fa-file-text-o'
                }

            }
        });

        $('#treeContent').jstree({
            'core' : {
                'data' : {
                    "url" : "${base}/knowledge/childrens/?",
                    "data" : function (node) {
                        return { "id" : node.id };
                    }
                }
            }
        });

    });
</script>

</html>

<% } %>